<template>
  <div>
    <el-table
      ref="multipleTable"
      :data="fileList"
      tooltip-effect="dark"
      style="width: 100%"
      border
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="文件名称" prop="fileName" show-overflow-tooltip></el-table-column>
      <el-table-column prop="format" label="文件格式"></el-table-column>
      <el-table-column prop="fileSize" label="文件大小"></el-table-column>
      <el-table-column prop="time" label="上传时间" show-overflow-tooltip></el-table-column>

      <el-table-column label="试听">
        <template slot-scope="scope">
          <span title="播放" @click="attempt(scope.row)" class="el-icon-headset"></span>
        </template>
      </el-table-column>
      <el-table-column label="下载">
        <template slot-scope="scope">
          <a title="下载" :href="'/api/threesuns'+scope.row.fullPath" class="el-icon-download" :download="scope.row.fileName">
          </a>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="删除">
        <template slot-scope="scope">
          <span @click="del(scope.row)">删除</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  props: ["fileList"],
  data() {
    return {
      tableData: [],
      multipleSelection: []
    };
  },
  watch: {
    multipleSelection(a) {
      this.$emit("change", a);
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    attempt(e) {
      this.$emit("attempt", e);
    },
    del(item) {
      this.$emit('del',item)
    }
  }
};
</script>
<style scoped>
@import url("../../../../../assets/css/table.css");
a {
  color: #fff;
}
span:active,a:active {
  color: #ccc;
}
span{
  cursor: pointer;
}
</style>